<template>
  <div style="width: 100%;height: 100%">
    <div class="flex-row" style="padding: 10px 10px 0 10px;box-sizing: border-box;">
      <div class="div-label" style="color: rgb(78,89,105)">节点标识：</div>
      <div class="div-label" style="color: rgb(29,33,41)">{{propsData.id}}</div>
    </div>
    <div class="flex-row" style="border-bottom: 1px solid transparent;border-color: rgb(229,230,235);padding: 10px;box-sizing: border-box;">
      <div class="div-label" style="color: rgb(78,89,105)">节点标签：</div>
      <div class="div-label" style="color: rgb(29,33,41)">
        <el-input v-model="propsData.branchName" :disabled="hasInput" size="mini"
        @blur="blurEmitData"></el-input>
      </div>
      <i class="el-icon-edit hover-proite" style="margin-left: 10px" @click="hasInput = false" v-if="this.hasInput"></i>

    </div>
  </div>
</template>

<script>
export default {
  name: "RightAttr",
  props:{
    dataBranch:{
      type:Object,
      default(){
        return {}
      }
    }
  },
  data(){
    return {
      propsData:{},
      hasInput:true
    }
  },
  created() {
    this.propsData = {...this.$props.dataBranch}
    console.log(this.propsData,'this.propsData')
  },
  watch:{
    dataBranch:{
      handler(val){
        this.propsData = {...val}
        console.log('????')
      },
      deep:true
    }
  },
  methods:{
    blurEmitData(){
      this.hasInput = true
      this.$emit('throwBranchName',{branchId:this.propsData.id,branchInputName:this.propsData.branchName})
    }
  }
}
</script>

<style scoped lang="scss">
.div-label{
  font-size: 14px;
}
</style>
